<template>
	<div class="login panel">
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group">
				<input style="display:none"><!-- for disable autocomplete on chrome -->
				<div class="mui-input-row">
					<label>账号</label>
					<input v-model="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号" autocomplete="off">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input v-model='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码" autocomplete="off">
				</div>
			</form>
			<form class="mui-input-group">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						自动登录
						<div id="autoLogin" class="mui-switch" :class="{'mui-active' : isAutoLogin}">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
			</form>
			<div class="mui-content-padded">
				<button id='login' class="mui-btn mui-btn-block mui-btn-primary" @tap="login">登录</button>
				<div class="link-area">
					<a href="#register" @tap="register">注册账号</a> <span class="spliter">|</span>
					<a @tap="forgotPassword">忘记密码</a>
				</div>
			</div>
			<div class="mui-content-padded oauth-area">
				<p>本软件由测试APP提供</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				isAutoLogin: true,
				username: "",
				password: ""
			}
		},
		methods: {
			login() {
				if(this.username == "") {
					alert("登录账号不能为空");
					return false;
				}
				if(this.password == "") {
					alert("登录密码不能为空");
					return false;
				}
				this.$router.replace("/");
			},
			register() {
				console.log("注册账号");
			},
			forgotPassword() {
				console.log("忘记密码");
			}
		},
		created() {

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.mui-content {
		height: 100%;
	}
	
	
	
	.mui-input-group {
		margin-top: 10px;
	}
	
	.mui-input-group:first-child {
		margin-top: 20px;
	}
	
	.mui-input-group label {
		width: 22%;
	}
	
	.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 78%;
	}
	
	.mui-checkbox input[type=checkbox],
	.mui-radio input[type=radio] {
		top: 6px;
	}
	
	.mui-content-padded {
		margin-top: 25px;
	}
	
	.mui-btn {
		padding: 10px;
	}
	
	.link-area {
		display: block;
		margin-top: 25px;
		text-align: center;
	}
	
	.spliter {
		color: #bbb;
		padding: 0px 8px;
	}
	
	.oauth-area {
		position: absolute;
		bottom: 20px;
		left: 0px;
		text-align: center;
		width: 100%;
		padding: 0px;
		margin: 0px;
	}
	
	.oauth-area .oauth-btn {
		display: inline-block;
		width: 50px;
		height: 50px;
		background-size: 30px 30px;
		background-position: center center;
		background-repeat: no-repeat;
		margin: 0px 20px;
		border: solid 1px #ddd;
		border-radius: 25px;
	}
	
	.oauth-area .oauth-btn:active {
		border: solid 1px #aaa;
	}
	
	.oauth-area .oauth-btn.disabled {
		background-color: #ddd;
	}
</style>